<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上师管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css"  media="all">
</head>
<body>
<!-- 修改的form表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">上师姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="上师姓名" autocomplete="on" class="layui-input">
            <input type="hidden" name="guruId">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickName" placeholder="上师昵称" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传头像</label>
            <button type="button" class="layui-btn" id="updateImg">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该上师" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">提交修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">上师姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="上师姓名" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nickName" placeholder="上师昵称" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传头像</label>
            <button type="button" class="layui-btn" id="uploadFile">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该上师" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">提交添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/html" id="img">
    <img src="/cmfz/{{d.photo}}" style="height: 50px"/>
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 2){ }}
    已删除
    {{#  } else if(d.status == 1) {   }}
    已被冻结
    {{#  } else {   }}
    正常
    {{#  }          }}
</script>
<!--工具栏-->
<table id="guruTable" lay-filter="guruTableFilter"></table>
<script type="text/html" id="tb1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="tb2">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">批量删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="add">添加上师</a>
    <button type="button" class="layui-btn layui-btn-sm" id="import" lay-event="import">导入数据</button>
<!--    <a class="layui-btn layui-btn-sm" lay-event="import" href="guru/import" target="_blank">一建导入</a>-->
    <a class="layui-btn layui-btn-sm" lay-event="export" id="export" href="guru/export" target="_blank">导出</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'layer','upload'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;

        table.render({
            elem: '#guruTable',
            url: 'guru/showPage',
            page: true,
            limit: 9,
            limits: [9, 20, 60],
            toolbar: '#tb2',
            cols: [[
                {type: 'checkbox'}
                , {title: '编号', field: 'guruId'}
                , {title: '头像', templet:'#img'}
                , {title: '昵称', field: 'nickName'}
                , {title: '真实姓名', field: 'name'}
                , {title: '状态', templet:'#status'}
                , {title: '操作', toolbar: '#tb1'}
            ]]
        });

        // 添加前上传
        upload.render({
            elem:'#uploadFile'
            // ,accept: 'audio' //只允许上传音频文件
            ,url:'guru/upload'
            ,done:function (res) {
                form.val('addFormFilter',{
                    photo:res.photo,
                });
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 模糊查询
        $('#search').click(function () {
            table.reload('guruTable',{
                where:{
                    title:$('#searchName').val()
                },
                page:{
                    curr:1
                }
            });
        });

        // 批量删除
        table.on('toolbar(guruTableFilter)',function (obj) {
            var status = table.checkStatus(obj.config.id);
            if (obj.event == 'add'){
                layer.open({
                    type:1,
                    content: $('#addForm'),
                    title:'添加上师'
                })

            }else if (obj.event == 'del'){
                var data = status.data;
                if (data.length == 0){
                    layer.msg('请至少勾选一项！');
                    return;
                }else {
                    var ids = [];
                    for (var i = 0; i<data.length; i++){
                        ids.push(data[i].guruId);
                    }
                }

                $.ajax({
                    url: 'guru/delete',
                    dataType: 'json',
                    data: 'id=' + ids,
                    success:function (result) {
                        if (result.isDelete){
                            layer.msg('删除成功！');
                            table.reload('guruTable');
                        }else {
                            layer.msg('删除失败！');
                            table.reload('guruTable');
                        }
                    }
                })
            }
        });


        //导入数据
        upload.render({
            elem: '#import'
            ,url: 'guru/import'
            ,accept: 'file' //普通文件
            ,done: function(res){
                if (res.Import){
                    layer.msg("上传成功！");
                }else {
                    layer.msg("上传失败！");
                }
            }
        });

        // 增加图片
        form.on('submit(addSubmit)',function () {
            $.ajax({
                url:'guru/add',
                dataType:'json',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if (result.isAdd){
                        layer.closeAll();
                        layer.msg('添加成功！');
                        table.reload('guruTable');
                        $("#addForm")[0].reset();
                    }else {
                        layer.closeAll();
                        layer.msg('添加失败！');
                        table.reload('guruTable');
                        $("#addForm")[0].reset();
                    }
                }
            })
            return false;
        });

        // 绑定单个删除事件

        table.on('tool(guruTableFilter)', function (obj) {
            var data = obj.data;
            var id = obj.data.guruId;
            console.log(obj);
            if (obj.event == 'del') {
                layer.confirm('确认要删除？', function (index) {
                    $.ajax({
                        url: 'guru/delete',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isDelete) {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功！");
                            } else {
                                layer.close(index);
                                layer.msg("删除失败！");
                            }
                        }
                    });
                });
            }else if (obj.event == 'edit'){
                $.ajax({
                    url: 'guru/showOne',
                    dataType: 'json',
                    data: 'id=' + id,
                    success: function (result) {
                        form.val('updateFormFilter', {
                            guruId:result.guruId,
                            nickName: result.nickName,
                            name:result.name,
                            status: result.status,
                            photo: result.photo
                        })
                    }
                });
                // 弹出修改表单
                layer.open({
                    type:1
                    ,content: $('#updateForm')
                    ,title:'编辑上师信息'
                })
            }
        });

        // 修改前上传
        upload.render({
            elem:'#updateImg'
            ,url:'guru/upload'
            ,done:function (res) {
                form.val('updateFormFilter',{
                    photo:res.photo
                })
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 修改
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                url: 'guru/update',
                data: $("#updateForm").serialize(),
                dataType: 'json',
                success: function (result) {
                    if (result.isUpdate) {
                        console.log('修改成功');
                        layer.msg('修改成功！');
                        $("#updateForm")[0].reset();
                        table.reload('guruTable');
                        layer.closeAll();
                    }else {
                        console.log('修改失败');
                        layer.msg('修改失败！');
                        $("#updateForm")[0].reset();
                        layer.closeAll();
                        table.reload('guruTable');
                    }
                }
            });
        });
    });
</script>
</body>
</html>